<template>
    <div class="coachsign">
        <el-card shadow="never animate__animated animate__fadeIn animate__fast">
            <div
                class="
                    title-top
                    onflex
                    animate__animated animate__fadeInUp animate__delay-0.5s
                "
            >
                <h2 @click="goBack" title="返回">
                    <i class="ri-arrow-left-line"></i>预约记录
                </h2>
            </div>
            <div class="top-card onflex text-l">
                <div class="card-left">
                    <div class="block">
                        <el-avatar
                            shape="square"
                            :size="150"
                            :src="classUrl"
                        ></el-avatar>
                    </div>
                </div>
                <div class="card-right">
                    <h3>课程</h3>
                    <span>2020-01-20</span>&nbsp;
                    <span> 08:30~09:15</span>&nbsp; <el-tag>教练</el-tag>&nbsp;
                    <span> 45分钟</span>
                    <div>
                        <span>已预约：0 </span>&nbsp;
                        <span> 已签到：0 </span>&nbsp;
                        <span> 已取消：0 </span>&nbsp;
                        <span> 候补中：0 </span>
                    </div>
                    <div class="button-b">
                        <el-button type="primary">编辑课程</el-button>
                        <el-button @click="delClass()">删除课程</el-button>
                    </div>
                </div>
            </div>
            <div
                class="
                    table-coachsign
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column fixed prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="phone" label="电话">
                    </el-table-column>
                    <el-table-column prop="numPeople" label="人数">
                    </el-table-column>
                    <el-table-column prop="workShift" label="上课时间">
                    </el-table-column>
                    <el-table-column prop="vipCard" label="会员卡">
                    </el-table-column>
                    <el-table-column prop="vipText" label="会员备注">
                    </el-table-column>
                    <el-table-column prop="state" label="状态">
                    </el-table-column>
                    <el-table-column prop="appointment" label="预约时间">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleClick(scope.row)"
                                type="text"
                                size="small"
                                >签到</el-button
                            >
                            <el-button
                                type="text"
                                size="small"
                                @click="closeClick(scope.row)"
                                >取消预约</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div
                class="
                    pagination-coachsign
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :size="pageSize"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </el-card>
        <!-- 编辑对话框 -->
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            classUrl:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            tableData: [
                {
                    id: 1,
                    name: "小明1",
                    phone: "13988888888",
                    numPeople: "20",
                    workShift: "08:30-09:15",
                    vipCard: "八周挑战赛卡",
                    vipText: "备注",
                    state: "已签到",
                    appointment: "2020-01-20 08:30",
                },
                {
                    id: 2,
                    name: "小明2",
                    phone: "13988888888",
                    numPeople: "20",
                    workShift: "08:30-09:15",
                    vipCard: "八周挑战赛卡",
                    vipText: "备注",
                    state: "已签到",
                    appointment: "2020-01-20 08:30",
                },
                {
                    id: 3,
                    name: "小明3",
                    phone: "13988888888",
                    numPeople: "20",
                    workShift: "08:30-09:15",
                    vipCard: "八周挑战赛卡",
                    vipText: "备注",
                    state: "已签到",
                    appointment: "2020-01-20 08:30",
                },
                {
                    id: 4,
                    name: "小明4",
                    phone: "13988888888",
                    numPeople: "20",
                    workShift: "08:30-09:15",
                    vipCard: "八周挑战赛卡",
                    vipText: "备注",
                    state: "已签到",
                    appointment: "2020-01-20 08:30",
                },
                {
                    id: 5,
                    name: "小明5",
                    phone: "13988888888",
                    numPeople: "20",
                    workShift: "08:30-09:15",
                    vipCard: "八周挑战赛卡",
                    vipText: "备注",
                    state: "已签到",
                    appointment: "2020-01-20 08:30",
                },
            ],

            //分页
            cPage: "",
            pageSize: 5,
            pageTotal: 0,
        };
    },

    methods: {
        //返回
        goBack() {
            this.$router.go(-1);
            console.log("go back");
        },
        //点击页码
        currentChange(page) {
            console.log(page);
        },
        //签到
        handleClick(row) {
            console.log(row);
            this.$confirm("确定为该会员签到吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //取消预约
        closeClick(row) {
            console.log(row);
            this.$confirm("确定为该会员取消预约吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //删除课程
        delClass() {
            this.$confirm("确定删除该课程吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        getListFn() {
            this.$axios({
                url: "/gym/statistics/appointmentRecordStatistics",
                method: "post",
                data: {
                    limit: this.pageSize,
                    page: this.cPage,

                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.text-l {
    text-align: left;
}
.title-top {
    line-height: 50px;
    border-bottom: 1px solid #00000020;
    padding-bottom: 15px;
    justify-content: space-between;
    h2 {
        cursor: pointer;
    }
    i {
        vertical-align: -3px;
        margin-right: 10px;
    }
}
.table-coachsign {
    margin-top: 20px;
}
.pagination-coachsign {
    margin-top: 20px;
    text-align: end;
}
.top-card {
    margin-top: 20px;
    .card-left {
        width: 150px;
        height: 150px;
    }
    .card-right {
        margin-left: 20px;
        height: 150px;
        line-height: 30px;
        .el-tag {
            height: 25px;
            line-height: 25px;
        }
        .button-b {
            margin-top: 20px;
        }
    }
}
</style>